<template>
	<div class="container" @click="headleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOptions">
	            <swiper-slide v-for="(item,index) in imgs" :key="index">
	                <img class="gallary-img" :src="item" alt="">
	            </swiper-slide>
	            <div class="swiper-pagination"  slot="pagination"></div>
	        </swiper>
		</div>
	</div>
</template>
<script>
export default{
	name:'CommonGallary',
	props:{
		imgs:{
			type:Array,
			default(){
				return []
			}
		}
	},
	data(){
		return{
			swiperOptions:{
				pagination:'.swiper-pagination',
				paginationType:'fraction',
				observeParents:true,
				observer:true
			}
		}
	},
	methods:{
		headleGallaryClick(){
			this.$emit('close')
		}
	}
}
</script>
<style lang="stylus" scoped>
	.container >>>.swiper-container{overflow:inherit;}
	.container{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;z-index:99;display:flex;flex-direction:column;justify-content:center;}
	.wrapper{background:#fff;width:100%;height:0;padding-bottom:100%;}
	.gallary-img{width:100%;}
	.swiper-pagination{color:#fff;bottom:-5rem;}
	
</style>